<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/logo.png" alt>
        <span class="title">建设工程智慧管理平台</span>
      </div>
      <div class="change">
        <!-- 切换公司 项目 -->
        <el-dropdown @command="handleCompany">
          <span class="el-dropdown-link">切换公司<i class="el-icon-arrow-down el-icon--right"></i></span>
          <template #dropdown>
            <el-dropdown-menu :index="item.id" v-for="item in companyList" :key="item.id">
              <el-dropdown-item :command="item.id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown @command="handleItem">
          <span class="el-dropdown-link">切换项目<i class="el-icon-arrow-down el-icon--right"></i></span>
          <template #dropdown>
            <el-dropdown-menu :index="item.id" v-for="item in itemList" :key="item.id">
              <el-dropdown-item :command="item.id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <!-- 退出 -->
      <span @click="logout" style="font-size:15px">退出</span>
    </el-header>

    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">
          <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
        </div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template #title>
              <i :class="iconsObj[item.id]"></i><span>{{item.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/'+subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="saveNavState('/'+subItem.path)"
            >
              <template #title>
                <i class="el-icon-s-opportunity"></i><span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右侧内容主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 左侧菜单数据
      menuList:[],
      // 菜单 id对应icon
      iconsObj: {
        "010": "el-icon-office-building",
        "020": "el-icon-postcard",
        "030": "el-icon-s-custom",
        "040": "el-icon-s-operation",
        "050": "el-icon-edit-outline",
        "060": "el-icon-s-check",
        "070": "el-icon-data-analysis",
        "080": "el-icon-setting"
      },
      isCollapse: false,
      activePath: "/own",
      phone: "",

      // 顶部导航栏 显示用户所属的公司项目
      companyList: [{ id: "1", name: "A公司" }, { id: "2", name: "B公司" }],
      itemList: [{ id: "1", name: "项目a" },{ id: "2", name: "项目b" }],
      // 当前的公司id、项目id
      activeCompany: 0,
      activeItem: 0,

      superAdmin:[
        { id: "010", authName: "公司管理", children: [{ id: "011", authName: "公司列表", path: "company" }]},
        { id: "020", authName: "项目管理", children: [{ id: "021", authName: "项目列表", path: "item" },{ id: "022", authName: "项目成员管理", path: "itemMember" }]},
        { id: "030", authName: "用户管理", children: [{ id: "031", authName: "用户列表", path: "user" }]},
        { id: "040", authName: "权限管理", children: [{ id: "041", authName: "岗位权限管理", path: "power" }] },
        { id: "050", authName: "数据填报", children: [{ id: "051", authName: "表格操作", path: "reportExcel" },{ id: "052", authName: "数据填报", path: "report" },{ id: "053", authName: "填报记录", path: "reportRecord" },]},
        { id: "060", authName: "数据审核", children: [{ id: "061", authName: "表格审核", path: "reviewExcel" },{ id: "062", authName: "数据审核", path: "review" },{ id: "063", authName: "审核记录", path: "reviewRecord" },]},
        { id: "070", authName: "数据展示", children: [{ id: "071", authName: "项目情况", path: "showAll" },{ id: "072", authName: "单位工程情况", path: "showPart" }]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}
      ],
      companyAdmin:[
        { id: "020", authName: "项目管理", children: [{ id: "021", authName: "项目列表", path: "item" },{ id: "022", authName: "项目成员管理", path: "itemMember" }]},
        { id: "030", authName: "用户管理", children: [{ id: "031", authName: "用户列表", path: "user" }]},
        { id: "040", authName: "权限管理", children: [{ id: "041", authName: "岗位权限管理", path: "power" }] },
        { id: "050", authName: "数据填报", children: [{ id: "051", authName: "表格操作", path: "reportExcel" },{ id: "052", authName: "数据填报", path: "report" },{ id: "053", authName: "填报记录", path: "reportRecord" },]},
        { id: "060", authName: "数据审核", children: [{ id: "061", authName: "表格审核", path: "reviewExcel" },{ id: "062", authName: "数据审核", path: "review" },{ id: "063", authName: "审核记录", path: "reviewRecord" },]},
        { id: "070", authName: "数据展示", children: [{ id: "071", authName: "项目情况", path: "showAll" },{ id: "072", authName: "单位工程情况", path: "showPart" }]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}
      ],
      itemLeader:[
        { id: "020", authName: "项目管理", children: [{ id: "021", authName: "项目列表", path: "item" },{ id: "022", authName: "项目成员管理", path: "itemMember" }]},
        { id: "070", authName: "数据展示", children: [{ id: "071", authName: "项目情况", path: "showAll" },{ id: "072", authName: "单位工程情况", path: "showPart" }]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}
      ],
      companyLeader:[
        { id: "070", authName: "数据展示", children: [{ id: "071", authName: "项目情况", path: "showAll" },{ id: "072", authName: "单位工程情况", path: "showPart" }]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}
      ],
      contractor:[
        { id: "050", authName: "数据填报", children: [{ id: "051", authName: "表格操作", path: "reportExcel" },{ id: "052", authName: "数据填报", path: "report" },{ id: "053", authName: "填报记录", path: "reportRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      contractSupervisor:[
        { id: "060", authName: "数据审核", children: [{ id: "061", authName: "表格审核", path: "reviewExcel" },{ id: "062", authName: "数据审核", path: "review" },{ id: "063", authName: "审核记录", path: "reviewRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      progressor:[
        { id: "050", authName: "数据填报", children: [{ id: "051", authName: "表格操作", path: "reportExcel" },{ id: "052", authName: "数据填报", path: "report" },{ id: "053", authName: "填报记录", path: "reportRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      progressSupervisor:[
        { id: "060", authName: "数据审核", children: [{ id: "061", authName: "表格审核", path: "reviewExcel" },{ id: "062", authName: "数据审核", path: "review" },{ id: "063", authName: "审核记录", path: "reviewRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      documenter:[
        { id: "050", authName: "数据填报", children: [{ id: "051", authName: "表格操作", path: "reportExcel" },{ id: "052", authName: "数据填报", path: "report" },{ id: "053", authName: "填报记录", path: "reportRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      documentSupervisor:[
        { id: "060", authName: "数据审核", children: [{ id: "061", authName: "表格审核", path: "reviewExcel" },{ id: "062", authName: "数据审核", path: "review" },{ id: "063", authName: "审核记录", path: "reviewRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      experimenter:[
        { id: "050", authName: "数据填报", children: [{ id: "051", authName: "表格操作", path: "reportExcel" },{ id: "052", authName: "数据填报", path: "report" },{ id: "053", authName: "填报记录", path: "reportRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],
      experimentSupervisor:[
        { id: "060", authName: "数据审核", children: [{ id: "061", authName: "表格审核", path: "reviewExcel" },{ id: "062", authName: "数据审核", path: "review" },{ id: "063", authName: "审核记录", path: "reviewRecord" },]},
        { id: "080", authName: "个人中心", children: [{ id: "081", authName: "用户信息", path: "own" }]}        
      ],

    };
  },
  created() {
    this.isLogin();
    if (window.localStorage.getItem("autoLogin") === "true") {
      window.sessionStorage.setItem("satoken", window.localStorage.getItem("satoken"));
    }
  },
  methods: {
    async isLogin(){
      const { data: res } = await this.$http.get("user/isLogin");
      if (res.code == 200) {
        // this.$message.success(res.msg);
        this.activePath = window.sessionStorage.getItem("activePath");
        this.$router.push(this.activePath);
        this.getInformation();
      } else {
        this.$store.commit("autoLogin", false);
        this.$message.error(res.msg);
        window.sessionStorage.clear();
        this.$router.push("/login");
      }
    },
    async getInformation() {
      const { data: res } = await this.$http.get("user/getInfo");
      if (res.code != 200) { return this.$message.error(res.msg);}
      console.log(res);
        // 获取该用户的公司列表、项目列表、权限合集、以及用户当前选择的公司id、项目id
          // 需要接口获取菜单列表menuLis
          // 还需要获取该用户所属公司列表companyList,项目列表itemList
          // 获取按钮级权限菜单：页面部分内容有权限限制，比如可看但不可修改数据
      window.sessionStorage.setItem("roleName",this.res.roleName);
      switch(res.roleName){
        case "超级管理员": this.menuList = this.superAdmin;
          break;
        case "公司管理员": this.menuList = this.companyAdmin;
          break;
        case "合约员": this.menuList = this.contractor;
          break;
        case "合约主管": this.menuList = this.contractSupervisor;
          break;
        case "施工员": this.menuList = this.progressor;
          break;
        case "施工主管": this.menuList = this.progressSupervisor;
          break;
        case "资料员": this.menuList = this.documenter;
          break;
        case "资料主管": this.menuList = this.documentSupervisor;
          break;
        case "实验员": this.menuList = this.experimenter;
          break;
        case "实验主管": this.menuList = this.experimentSupervisor;
          break;
        case "项目负责人": this.menuList = this.itemLeader;
          break;
        case "公司负责人": this.menuList = this.companyLeader;
          break;
        default:
          this.$message.error("岗位未知");
      }
    },
    handleCompany(command) {this.$message.info("当前您选择的公司id为：" + command);},
    handleItem(command) {this.$message.info("当前您选择的项目id为：" + command);},
    logout() {
      this.$http.get("user/logout");
      // if (res.code != 200) {return this.$message.error(res.msg);}
      this.$store.commit("logout");      
      this.$router.push("/login");
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 12px;
    }
    img {
      margin-left: 5px;
      height: 50px;
      width: 50px;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  // .el-button {
  //   width: 80px;
  //   padding: 10px;
  // }
  .title {
    width: 200px;
  }
  .change {
    height: 30px;
    width: 200px;
    padding-left: 10px;
  }
}
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
